import React from 'react';
import { NuiBt, obj_empty, obj_str, SmallInput, useDate } from 'sui';
import { clear_gun } from 'base/api';
import { s_line, s_wsn, s_model } from 'db/state';
import { loc } from 'local/index.js';

const Value = ({ label, children, width="w-32" }) => (
    <div className={"mr-2 " + width}>
        <SmallInput label={label} value={children}/>
    </div>
);

const Time = ({ className, up=false }) => {
    const [date, time] = useDate();
    if (!up) {
        return (
            <div className={"text-white text-xl mt-1 mr-6 " + className}>{date}<span className="ml-4">{time}</span></div>
        );
    }

    return (
        <div className="flex-col text-white">
            <div className={"mr-2 " + className}>{date}</div>
            <div className={"ml-3 " + className}>{time}</div>
        </div>
    );
};

const get_path = (pathname, model) => {
    const tmp = pathname.split("/");
    if (tmp.length !== 4 && tmp[1] !== model) {
        return [null, null];
    }

    const line = tmp[2];
    const wsn = tmp[3];

    s_line(line);
    s_wsn(wsn);
    s_model(model);

    clear_gun();

    return [line, wsn];
};

const is_fullscreen = () => {
    return (document.fullscreenElement && document.fullscreenElement !== null) ||
        (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
        (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
        (document.msFullscreenElement && document.msFullscreenElement !== null);
};

const full_screen = () => {
    var docElm = document.documentElement;
    if (!is_fullscreen()) {
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) {
            docElm.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
};

const StepTitle = ({ umd, opt }) => {
    const getDes = () => {
        const num = umd.get("stepnum") - 1;
        const esop = umd.curStep(num);
        if (!esop) {
            return null;
        }

        const des = esop["stepdes"];
        if (!des) {
            return loc("base_24");
        }

        return <div>{des}</div>;
    };

    const getOpt = () => {
        if (obj_empty(opt)) {
            return null;
        }

        return (
            <div className="inline-flex text-2xl text-blue-800 mb-2">
                <div className="inline-flex">直径范围<span className="ml-2">{`[${obj_str(opt, "dia_min")} , ${obj_str(opt, "dia_max")}]`}</span></div>
                <div className="inline-flex mx-8">沟径范围<span className="ml-2">{`[${obj_str(opt, "dt_min")} , ${obj_str(opt, "dt_max")}]`}</span></div>
                <div className="inline-flex">宽度范围<span className="ml-2">{`[${obj_str(opt, "w_min")} , ${obj_str(opt, "w_max")}]`}</span></div>
            </div>
        );
    };

    return (
        <div className="w-full bg-gray-200 text-3xl flex flex-col items-center justify-center h-32 border border-white">
            {getOpt()}
            {getDes()}
        </div>
    );
};

const Sbtn = ({ label, cl, hcmd, w="w-32", className, disabled }) => (
    <NuiBt color={cl} className={`h-16 ml-8 ${w} ${className}`} hcmd={hcmd} disabled={disabled}>
        <div className="text-2xl">{label}</div>
    </NuiBt>
);

export {Sbtn, StepTitle, full_screen, is_fullscreen, get_path, Time, Value};
